<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head> 
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>login</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="css/bootstrapValidator.min.css">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/login.js"></script>
<script src="js/bootstrapValidator.min.js"></script>
<script src="js/zh_CN.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<div class="pull-left">
					<img src="images/PETCLUB2.png" alt="" />
				</div>
			</div>
			<div class="col-md-3 col-md-offset-9 col-xs-offset-8 col-xs-4"
				style="padding-top: 8%">
				<div class="panel panel-info">
					<div class="panel-heading" style="text-align: center">
						<i class="glyphicon glyphicon-home" style="font-size: 200%">PETCLUB</i>
					</div>
					<div class="panel-body well">
						<form id="formlogin" method="post">
							<div class="form-group">
								<div class="input-group ">
									<span class="input-group-addon"><i
										class="glyphicon glyphicon-user"></i></span><input
										class="form-control" id="loginname" type="text"
										name="username" placeholder="用户名" />
								</div>
							</div>
							<div class="form-group">
								<div class="input-group">
									<span class="input-group-addon"><i
										class="glyphicon glyphicon-lock"></i></span><input
										class="form-control" id="nloginpwd" type="password"
										name="password" placeholder="******" />
								</div>
							</div>
							<!-- <div class="form-group">
								<div class="input-group ">
									<label for="keepLogin"> <input type="checkbox"
										id="keepLogin">记住密码
									</label>
								</div>
							</div> -->
							<!--  onclick="LOGIN.login()"style="background: lightskyblue background:#3e8f3e">
								style="background: lightskyblue; border-left: solid lightskyblue; border-radius: 5%"-->
							<div class="form-group">
								<div class="input-group " style="margin-top: 5%">
									<input class="form-control btn btn-success btn-block loginBtn"
										type="submit" value="登录">
									 <span
									class="input-group-addon" style=""> <i
									class="glyphicon glyphicon-log-in"></i></span>
								</div>
							</div>
						</form>
					</div>
					<div class="panel-footer">
						<div class="" style="text-align: center">
							<a href="#">忘记密码&nbsp;&nbsp;</a>&nbsp;<a href="#">免费注册</a>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</body>
<script>
	var redirectUrl = "${redirect}";
	var LOGIN = {
		checkInput : function() {
			if ($("#loginname").val() == "") {
				alert("用户名不能为空");
				$("#loginname").focus();
				return false;
			}
			if ($("#nloginpwd").val() == "") {
				alert("密码不能为空");
				$("#nloginpwd").focus();
				return false;
			}
			return true;
		},
		doLogin : function() {
			$
					.post(
							"user/login",
							$("#formlogin").serialize(),
							function(data) {
								if (data.status == 200) {
									alert("登录成功！");
									if (redirectUrl == "") {
										location.href = "http://localhost:8080/distribute-portal/";
									} else {
										location.href = redirectUrl;
									}
								} else {
									alert("登录失败，原因是：" + data.msg);
									$("#loginname").select();
								}
							});
		},
		login : function() {
			if (this.checkInput()) {
				this.doLogin();
			}
		}

	};
	$(function() {
		formValidator();
		$("#formlogin").submit(function(ev) {
			ev.preventDefault();
		});
		$(".loginBtn").on("click", function() {
			var bootstrapValidator = $("#formlogin").data('bootstrapValidator');
			bootstrapValidator.validate();
			if (bootstrapValidator.isValid()) {
				/*  $("#yourform").submit(); */
				alert("isubmit");
				$
				.post(
						"user/login",
						$("#formlogin").serialize(),
						function(data) {
							if (data.status == 200) {
								alert("登录成功！");
								if (redirectUrl == "") {
									location.href = "http://localhost:8080/distribute-portal/";
								} else {
									location.href = redirectUrl;
								}
							} else {
								alert("登录失败，原因是：" + data.msg);
								$("#nloginpwd").select();
							}
						});
			}

			else
				return;

		});
		/* $("#loginsubmit").click(function() {
			LOGIN.login();
		}); */

	});
	function formValidator() {
		/* boostrap validator */
		$('#formlogin').bootstrapValidator({
			message : 'This value is not valid',
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {
				username : {
					message : '用户名验证失败',
					validators : {
						notEmpty : {
							message : '用户名不能为空'
						},
						stringLength : {
							min : 3,
							max : 18,
							message : '用户名长度必须在3到18位之间'
						},
						regexp : {
							regexp : /^[a-zA-Z0-9_]+$/,
							message : '用户名只能包含大写、小写、数字和下划线'
						}
					}
				},
				password : {
					validators : {
						notEmpty : {
							message : '密码不能为空！'
						},
						stringLength : {
							min : 6,
							max : 18,
							message : '密码长度必须在6到18位之间'
						},
					}
				},
			},
			submitHandler : function(validator, form, submitButton) {

			}

		});
	}
</script>
</html>